<template>
	<view>
		<!-- 个人中心 -->
		<view class="weather">
			<!-- 个人中心 -->
		</view>
		<!-- 个人信息部分 -->
		<view class="header">
			<view class="right" v-if="!user.userId">
				<!-- 跳转判断是否有token 没有的话点击头提示  没有登入 -->
				<image class="settings-icon" src="@/static/用户.png" style="height: 100px;width: 100px;"></image>
				<text class="login animate-text" @click="loginBtn">请先登陆</text>
			</view>
			<view class="left" v-else>
				<!-- 判断是否有用户 token 没有的时候显示默认图片  后续修改-->
				<image class="avatar" :src="'http://121.36.57.151:8888'+user.userAvatar" mode="aspectFill"></image>
				<view class="info">
					<!-- 动态文字动画 -->
					<text class="phone animate-text">{{user.userPhone}}</text>
					<br>
					<text class="name animate-text">{{user.userName}}</text>



				</view>

			</view>

			<!-- 			<button open-type=getPhoneNumber bindgetphonenumber=getPhoneNumber>登陆</button>
			<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">登陆</button> -->
			<!-- <button open-type=chooseAvatar>头像</button> -->
		</view>

		<!-- 钱包积分部分 -->
		<view class="wallet">
			<view class="qian">
				<text class="amount">¥ 0.00</text>
				<br>
				<text class="label">余额</text>
			</view>
			<view class="points">
				<text class="amount">0</text>
				<br>
				<text class="label">积分</text>
			</view>
		</view>

		<view class="order-section">
			<!-- 标题栏 -->
			<view class="order-header">
				<text class="title">我的订单</text>
				<text class="all-orders">查看所有订单 ></text>
			</view>

			<!-- 使用 Flex 布局的图标部分 -->
			<view class="order-grid">
				<view class="grid-item">
					<u-icon name="/static/fahuo.png" color="#12b21d" size="40"></u-icon>
					<text class="status-text">待支付</text>
				</view>
				<view class="grid-item">
					<u-icon name="/static/fukuan.png" color="#12b21d" size="40"></u-icon>
					<text class="status-text">待发货</text>
				</view>
				<view class="grid-item">
					<u-icon name="/static/select.png" color="#12b21d" size="40"></u-icon>
					<text class="status-text">待确认</text>
				</view>
				<view class="grid-item">
					<u-icon name="/static/wan.png" color="#12b21d" size="40"></u-icon>
					<text class="status-text">已完成</text>
				</view>
			</view>
		</view>

		<!-- 农场管理 -->
		<view class="farm-section">
			<!-- 标题栏 -->
			<view class="farm-header">
				<text class="title">农场管理</text>
			</view>

			<!-- 使用 Flex 布局的图标部分 -->
			<view class="farm-grid">
				<view class="grid-item" @click="navigateTo('/pages/myLand/index')">
					<u-icon name="/static/land.png" color="#4caf50" size="40"></u-icon>
					<text class="status-text">我的土地</text>
				</view>
				<view class="grid-item" @click="navigateTo('/pages/warehouse/index')">
					<u-icon name="/static/我的认养.png" color="#8e24aa" size="40"></u-icon>
					<text class="status-text">我的仓库</text>
				</view>
				<view class="grid-item" @click="navigateTo('/pages/contract/index')">
					<u-icon name="/static/我的活动.png" color="#ff7043" size="40"></u-icon>
					<text class="status-text">我的合同</text>
				</view>
				<view class="grid-item" @click="navigateTo('/pages/log/index')">
					<u-icon name="/static/我的地址.png" color="#2196f3" size="40"></u-icon>
					<text class="status-text">我的日志</text>
				</view>
				<view class="grid-item">
					<u-icon name="/static/我的订单.png" color="#000000" size="40"></u-icon>
					<text class="status-text">订单中心</text>
				</view>
				<view class="grid-item">
					<u-icon name="/static/我的发票.png" color="#000000" size="40"></u-icon>
					<text class="status-text">发票管理</text>
				</view>
				<view class="grid-item" @click="navigateTo('/pages/sale/index')">
					<u-icon name="/static/签到.png" color="#000000" size="40"></u-icon>
					<text class="status-text">出售土地</text>
				</view>
				<view class="grid-item" @click="navigateTo('/pages/signin/index')">
					<u-icon name="/static/签到.png" color="#000000" size="40"></u-icon>
					<text class="status-text">签到</text>
				</view>
			</view>
		</view>

		<view class="assist-section">
			<!-- 标题栏 -->
			<view class="assist-header">
				<text class="title">辅助功能</text>
			</view>

			<!-- 使用 Flex 布局的图标部分 -->
			<view class="assist-grid">
				<view class="grid-item" @click="navigateTo('/pages/chat/index')">
					<u-icon name="/static/客服.png" size="40"></u-icon>
					<text class="status-text">专属客服</text>
				</view>
				<view class="grid-item">
					<u-icon name="/static/优惠券.png" size="40"></u-icon>
					<text class="status-text">我的优惠券</text>
				</view>
				<view class="grid-item">
					<u-icon name="/static/领券.png" size="40"></u-icon>
					<text class="status-text">领券</text>
				</view>
				<view class="grid-item">
					<u-icon name="/static/签到.png" size="40"></u-icon>
					<text class="status-text">签到</text>
				</view>
				<view class="grid-item">
					<u-icon name="/static/收藏夹.png" size="40"></u-icon>
					<text class="status-text">收藏夹</text>
				</view>
				<view class="grid-item">
					<u-icon name="/static/分销中心.png" size="40"></u-icon>
					<text class="status-text">分销中心</text>
				</view>
				<view class="grid-item">
					<u-icon name="/static/服务订单.png" size="40"></u-icon>
					<text class="status-text">服务订单</text>
				</view>
				<view class="grid-item">
					<u-icon name="/static/基本信息.png" size="40" @click="toInfo"></u-icon>
					<text class="status-text">个人信息</text>
				</view>
				<view class="grid-item">
					<u-icon name="/static/常见问题.png" size="40"></u-icon>
					<text class="status-text">常见问题</text>
				</view>

			</view>
		</view>



		<!-- 底部导航栏 -->
		<bottomVue></bottomVue>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	// 底边导航栏组件
	import bottomVue from '@/component/bottom.vue';

	import {
		useTokenStore
	} from '@/stores/token.js';
	import {
		useUserStore
	} from '@/stores/user.js'

	const user = reactive({
		userId: '',
		userPhone: '',
		userName: '',
		userAvatar: ''
	});
	const start = () => {
		console.log("开始获取用户信息");
		user.userId = useUserStore().user.userId;
		user.userPhone = useUserStore().user.userPhone;
		user.userName = useUserStore().user.userName;
		user.userAvatar =useUserStore().user.userAvatar;
		console.log(user.userId);
	}
	start();



	// 调用pinia avatar头像
	// const authStore = useAuthStore(); // 调用 Pinia Store
	const defaultAvatar = '/static/default.jpg'; // 默认头像
	
	const userToken = ref('');

	const userInfo = reactive({
		name: '',
		phone: ''
	});

	const loginBtn = () => {
		uni.navigateTo({
			url: '/pages/mine/loginNew'
		})
	}




	// 跳转
	const navigateTo = (url) => {
		uni.navigateTo({
			url,
			fail: (err) => {
				console.error('Failed to navigate:', err);
			},
		});
	};

	//跳转到个人信息页面
	const toInfo = () => {
		console.log(user.userId)

		if (user.userId == null || user.userId == '') {
			console.log("请先登陆");
			wx.showModal({
				title: '提示', // 弹窗标题
				content: '请先登陆', // 弹窗内容
			});
			return;
		}
		uni.navigateTo({
			url: '/pages/mine/editinfo'
		})
	}
</script>

<style scoped lang="scss">
	.weather {
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		/* 字体颜色设置为白色 */
		font-size: 20px;
		/* 可调整字体大小 */
		width: 100%;
		/* 占满父级容器宽度 */
		background-color: #00C853;
		/* 设置背景颜色 */
	}

	/* 整体背景 */
	.header,
	.wallet {
		background-color: #00C853;
		/* 绿色背景 */
		padding: 15px;
		color: white;
	}

	/* 钱包容器样式 */
	.wallet {
		/* 	display: flex;
	justify-content: space-around;
	padding: 15px;
	background-color: #00a651; /* 背景色 */
		border-radius: 0 0 20px 20px;
		/* 下方圆角 */
	}

	/* 头像和基本信息 */
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		/* 圆形头像 */
		margin-right: 10px;
		/* background-color: #e0e0e0; */
	}

	.info .phone {
		font-size: 16px;
		font-weight: bold;
	}

	.phone {
		font-size: 18px;
		/* 字体大小 */
		font-weight: bold;
		/* 加粗 */
		color: white;
		/* 白色文字 */
		margin-bottom: 5px;
		/* 和下面文字的间距 */
	}

	.name {
		font-size: 14px;
		/* 次级文字字体大小 */
		color: #e0e0e0;
		/* 次要文字颜色 */
	}

	.right .settings-icon {
		display: flex;
		align-items: center;
		width: 24px;
		height: 24px;
	}

	/* 钱包和积分部分 */
	.wallet {
		display: flex;
		justify-content: space-around;
	}

	.qian,
	.feng,
	.points {
		width: 30%;
		background-color: #2baf2b;
		/* 卡片绿色背景 */
		border-radius: 8px;
		padding: 10px;
		text-align: center;
	}

	.amount {
		font-size: 18px;
		font-weight: bold;
	}

	.label {
		font-size: 12px;
		color: #e0e0e0;
		margin-top: 5px;
	}

	/* 外层容器样式 */
	.order-section {
		margin: 10px auto;
		/* 上下 10px，左右居中 */
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 10rpx;

		width: 90%;
		box-shadow: 0 -5rpx 10rpx rgba(0, 0, 0, 0.1), 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
		/* 阴影在顶部和底部 */
	}

	/* 标题栏样式 */
	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #f5f5f5;
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.all-orders {
		font-size: 26rpx;
		color: #8f8f94;
	}

	/* 网格项样式 */
	.order-grid {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-grid u-grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	.status-text {
		font-size: 24rpx;
		color: #333333;
		margin-top: 10rpx;
	}

	/* 农场数值 */
	/* 外层容器样式 */
	.farm-section {
		margin: 10px auto;
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 10rpx;
		width: 90%;
		box-shadow: 0 -5rpx 10rpx rgba(0, 0, 0, 0.1), 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	/* 标题栏样式 */
	.farm-header {
		padding-bottom: 20rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	/* 图标部分使用 Flex 布局 */
	.farm-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}

	.grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 22%;
		margin-bottom: 20rpx;
	}

	.status-text {
		font-size: 24rpx;
		color: #333333;
		margin-top: 10rpx;
	}

	/* 辅助功能 */
	/* 外层容器样式 */
	.assist-section {
		margin: 10px auto;
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 10rpx;
		width: 90%;
		box-shadow: 0 -5rpx 10rpx rgba(0, 0, 0, 0.1), 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	/* 标题栏样式 */
	.assist-header {
		padding-bottom: 20rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.assist-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

		.grid-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 30%;
			margin-bottom: 20rpx;
		}

		.status-text {
			font-size: 24rpx;
			color: #333333;
			margin-top: 10rpx;
		}
	}
</style>